//  数据懒加载
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
import { onMounted, ref } from 'vue'

// 接收一个回调函数，返回一个ref引用
// 功能：当ref引用的dom处于可见状态时，调用一次回调函数
export function useLazyData( fn:()=> void ) {
  const target = ref(null)
  // 当整个区块处于可见状态时，才发ajax
  onMounted(()=>{
    const { stop } = useIntersectionObserver(target.value,([{ isIntersecting}]) =>{
      // 可见
      if(isIntersecting) {
        // 发请求
        fn()
        // 停止监听
        stop()
      }
    })
  })
  return target
}


// 倒计时函数封装
export function useCountDown(){
  const counter = ref(0)
  const { pause,resume} = useIntervalFn(()=>{
  if(counter.value === 0){
    // 暂停
    pause()
  }else{
    counter.value--
  }
  // immediate:false 是否立即执行
},1000,{immediate:false})
  const start = (num:number) => {
    counter.value = num
    resume()
  }
return {counter,start}
}

// export function useCountDown(){
//   const counter = ref(0)
//   const { pause, resume} = useIntervalFn(() => {
//     if(counter.value === 0) {
//         pause()
//     } else {
//       counter.value--
//     }
//   }, 1000, { immediate: false})

//   const start = (num: number) => {
//     counter.value = num
//     resume()
//   }

//   return { counter, start }
// }